import dash
from dash import html, Input, Output, State
import feffery_antd_components as fac

app = dash.Dash(__name__, update_title=None)

app.layout = html.Div(
    [
        html.Div(
            id='notification-container'
        ),
        html.Div(
            [
                html.Div(
                    fac.AntdTitle(
                        'XX系统用户登录',
                        level=2
                    ),
                    style={
                        'textAlign': 'center',
                        'marginBottom': '40px'
                    }
                ),
                fac.AntdForm(
                    [
                        fac.AntdFormItem(
                            fac.AntdInput(
                                id='username',
                                style={
                                    'width': '100%'
                                }
                            ),
                            label='用户名'
                        ),
                        fac.AntdFormItem(
                            fac.AntdInput(
                                id='password',
                                mode='password',
                                style={
                                    'width': '100%'
                                }
                            ),
                            label='密码'
                        ),
                        fac.AntdFormItem(
                            fac.AntdCheckbox(
                                id='remember-password',
                                label='记住密码'
                            ),
                            wrapperCol={
                                'offset': 4
                            }
                        ),
                        fac.AntdFormItem(
                            fac.AntdButton(
                                '登录',
                                id='login',
                                type='primary'
                            ),
                            wrapperCol={
                                'offset': 4
                            }
                        )

                    ],
                    labelCol={
                        'span': 4
                    },
                    wrapperCol={
                        'span': 20
                    }
                )
            ],
            style={
                'width': '500px',
                'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                'padding': '20px',
                'position': 'fixed',
                'top': '25%',
                'left': '50%',
                'transform': 'translateX(-50%)'
            }
        )
    ]
)


@app.callback(
    Output('notification-container', 'children'),
    Input('login', 'nClicks'),
    [
        State('username', 'value'),
        State('password', 'value'),
        State('remember-password', 'checked')
    ]
)
def collect_login_info(nClicks, username, password, remember_password):

    if nClicks:
        return fac.AntdNotification(
            message='提交的信息',
            description=f'{nClicks}-{username}-{password}-{remember_password}'
        )

    return dash.no_update


if __name__ == '__main__':
    app.run_server(debug=True)
